<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
    //  拆分逻辑，分为单个代办事项逻辑和代办事项列表逻辑

    //  单个待办事项逻辑
    const toDoItemEffect = ()=>{
        const {ref} = Vue;
        let toDoItem = ref(""); // 代办事项
        const changeInput = (e)=>{
            toDoItem = e.target.value;
        }
        return {toDoItem, changeInput}
    }

    //  待办事项列表逻辑
    const toDoListEffect = ()=>{
        const {toRefs} = Vue;
        let toDoList = toRefs([]); // 代办事项列表

        const addItem = (item)=>{
            toDoList.push(item);
            item.value = "";
        }
        return {toDoList, addItem};
    }


    const app = Vue.createApp({
        template: `
              <div>
                请输入待办事项：<input type="text" :value="toDoItem" @input="changeInput"><button @click="submit">提交</button>
                <ul>
                  <li v-for="(item, index) in toDoList" :key="index">
                    {{item}}
                  </li>
                </ul>
              </div>
            `,
        setup(){
            const {toDoItem, changeInput} = toDoItemEffect()
            const {toDoList, addItem} =  toDoListEffect()
            const submit = ()=>{
                addItem(toDoItem)
            }
            return {
                toDoItem,
                toDoList,
                changeInput,
                submit,

            }
        }
    });
    const vm = app.mount("#root")
</script>
</body>
</html>